<template>
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100, 200,300]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
</template>
<script>
export default {
    name:'pagination',
    data() {
      return {
        pageSizes: [10, 20, 50, 100, 200,300],
        curPageSize: this.pageSize,
      };
    },
    props: {
        pageSize: {
            type: Number,
            default: 10
        },
        curPage: {
            type: Number,
            default: 1
        },
        total: Number,
    },
    methods:{
        handleCurrentChange(currentVal) {
            this.$emit('handleChange', this.curPageSize, currentVal);
        },
        handleSizeChange(val) {
            this.curPageSize = val;
            this.$emit('handleChange', val, 1);
        },
    }
}
</script>
<style lang="less">
    .el-pagination{
        margin-top: 20px;
        text-align: center;
    }
</style>
